.arrow-box {
  width: 376px;
  height: 100px;
  position: relative;
}

.arrow-box .rate {
  display: inline-block;
  position: absolute;
  padding: 2px 10px;
  top: -10px;
  left: 50%;
  background-color: #fff;
  transform: translateX(-50%);
}
.arrow-box .info {
  display: inline-block;
  position: absolute;
  margin-top: 10px;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.custom-div {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.custom-div-right {
  width: 376px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
.custom-div img:nth-child(1) {
  position: absolute;
  top: 0;
  left: 8px;
} 
.custom-div img:nth-child(2) {
  position: absolute; /* 绝对定位以脱离文档流 */  
  bottom: 0;
  transform-origin: top left; /* 设置旋转的基点为顶部右侧 */  
  transform: rotate(-90deg); /* 逆时针旋转90度 */  
} 

.custom-div-right img:nth-child(1) {
  position: absolute;
  top: 0;
  right: 6px;
} 
.custom-div-right img:nth-child(2) {
  position: absolute; /* 绝对定位以脱离文档流 */  
  bottom: 0;
  left: calc(100% - 16px);
  transform-origin: top left; /* 设置旋转的基点为顶部右侧 */  
  transform: rotate(-90deg); /* 逆时针旋转90度 */  
} 


.custom-div-center {
  width: 300px;
  height: 50px;
  position: relative;
  overflow: hidden;
}
.custom-div-center img:nth-child(1) {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-origin: top left;
  /* transform: rotate(-90deg) translate(0, -16px); 逆时针旋转90度   */
} 